<template>
    <div>
                <mu-appbar style="width: 100%;" color="primary" fixed>
        <mu-button icon slot="left" @click="goback">
            <mu-icon value="arrow_back"></mu-icon>
        </mu-button>
        服务记录
        <mu-button flat slot="right"  >
            <mu-icon value=""></mu-icon>
        </mu-button>
        </mu-appbar>

   <div style="margin-top:5px;">
<el-table
v-loading="loading"
    :data="jilu"
    style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="活动地区">
            <span>{{ props.row.area }}</span>
          </el-form-item>
          <el-form-item label="活动地址">
            <span>{{ props.row.address }}</span>
          </el-form-item>
          <el-form-item label="联系方式">
            <span>{{ props.row.phone }}</span>
          </el-form-item>
          <el-form-item label="活动类型">
            <span>{{ props.row.type }}</span>
          </el-form-item>
          <el-form-item label="报名要求">
            <span>{{ props.row.requirement }}</span>
          </el-form-item>
          <el-form-item label="活动简介">
            <span>{{ props.row.describe }}</span>
          </el-form-item>

        </el-form>
      </template>
    </el-table-column>

    <el-table-column
      label="活动名称"
      prop="title">
    </el-table-column>
    <el-table-column
      label="描述"
      prop="describe">
    </el-table-column>
  </el-table>
    </div>
    </div>
</template>
<script>
import axios from "axios";
import Toast from "muse-ui-toast";
export default {

    data(){
    axios
      .get("/api/activity/getsignedacts", { params: {} })
      .then(res => {
        this.jilu = res.data.data.reverse();
        console.log(this.jilu)
      })
      .catch(err => {
        console.log(err);
      });
return{
    value:'',
    loading:false,
    jilu:[]
}
    },
    methods:{
        goback() {
      this.$router.go(-1); //返回上一层
    },
    }

}
</script>
<style>

  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
  }
</style>